<template>
  <div class="app-container">
    <!--查询-->
    <div class="my-bar" style="margin-bottom: 10px;">
      <el-form :inline="true" class="float-right" size="small">
        <el-form-item>
          <el-input v-model="getData.addr" placeholder="地址" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="getData.db" placeholder="数据库" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="getData.usr" placeholder="用户名" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="getData.psd" placeholder="密码" show-password />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSearch()"><i class="el-icon-search" /></el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :span="16">
        <el-cascader v-model="selects" :options="projectList" size="small" placeholder="请选择项目模块" clearable />
        <el-tooltip content="后端自动加上创建者和创建时间字段" placement="top">
          <el-checkbox v-model="showData.hasCreateCln" label="创建者" border style="margin:0" />
        </el-tooltip>
        <el-tooltip content="后端自动加上修改者和修改时间字段" placement="top">
          <el-checkbox v-model="showData.hasModifyCln" label="修改者" border style="margin:0" />
        </el-tooltip>
        <span>SQL语句，小心修改后保存</span>
        <el-input v-model="showData.sql" :rows="20" type="textarea" style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px;" />
        <el-button :loading="loading" size="small" type="primary" @click="onImport()">保存</el-button>
      </el-col>
      <el-col :span="8">
        <!--列表-->
        <el-table v-loading="listData.loading" :data="listData.data.filter(data => !search || data.name.includes(search))" element-loading-text="载入中..." border fit highlight-current-row>
          <el-table-column align="center" fixed="left" label="选择" width="80px">
            <template slot-scope="scope">
              <el-button-group>
                <el-button :type="scope.row.onSelect && scope.row.onSelect === 1 ? 'danger' : 'primary'" size="mini" icon="el-icon-arrow-left" @click="onShow(scope)" />
              </el-button-group>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="表名">
            <template slot="header">
              <el-input v-model="search" size="small" style="width:200px" placeholder="输入关键字搜索" clearable />
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="cmmt" label="注释" /> -->
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '@/api/service'

export default {
  data() {
    return {
      getData: {
        addr: 'localhost',
        db: 'tpl',
        usr: 'root',
        psd: 'fangxu$%#@!',
        tbl: ''
      },
      listData: {
        loading: false,
        data: []
      },
      showData: {
        index: -1,
        sql: '',
        hasCreateCln: true,
        hasModifyCln: true
      },
      loading: false,
      projectList: [],
      selects: [],
      search: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getProjectList()
    },
    getProjectList() {
      this.listData.loading = true
      api.getListPage('project', {
        pageSize: 100, params: {
          showFlag: 'moduleList'
        }
      }).then(res => {
        for (const data of res.data) {
          data['children'] = data.moduleList
          data['label'] = data.name
          data['value'] = data.id
          for (const d of data.children) {
            d['label'] = d.name
            d['value'] = d.id
          }
          delete data.moduleList
        }
        this.projectList = res.data
        this.listData.loading = false
      })
    },
    getListData() {
      this.listData.loading = true
      api.newRequest('table', 'showTables', this.getData).then(res => {
        this.listData.data = res.data
        this.listData.loading = false
      })
    },
    onSearch() {
      new WebSocket()
      this.getListData()
    },
    onShow(scope) {
      for (const data of this.listData.data) {
        this.$set(data, 'onSelect', 0)
      }
      this.$set(scope.row, 'onSelect', 1)
      this.getData.tbl = scope.row.name
      api.newRequest('table', 'showCreateTable', this.getData).then(res => {
        this.showData.sql = res.data.sql.replace(/ COLLATE[ =]utf8mb4_unicode_ci/g, '')
      })
    },
    onImport() {
      if (this.selects.length === 0) {
        this.$notify.error('请选择项目和模块')
        return
      }
      this.loading = true
      api.newRequest('table', 'saveTable',
        {
          project: this.selects[0],
          module: this.selects[1],
          // table: this.showData.tbl,
          sql: this.showData.sql,
          hasCreateCln: this.showData.hasCreateCln,
          hasModifyCln: this.showData.hasModifyCln
        }
      ).then(res => {
        this.$notify({
          type: 'success',
          message: '保存成功!'
        })
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
      this.showData = {
        index: -1,
        sql: '',
        notActColumn: true
      }
    }
  }
}
</script>